<!--我的账户-->
<template>
  <div class="myaccount">
    <div class="my_header">
      <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="gocener"></i>
      <div class="top1">我的钱包</div>
      <div class="cmaccount">
        <router-link to="/cmpanyaccount" style="color: #FFFFFF;">钱包设置</router-link>
      </div>
    </div>

    <div class="zhye">
      <div class="title">钱包余额</div>
      <div class="ye">￥{{wallet}}</div>
    </div>

    <div class="txlist">
      <div class="row" @click="opentxtype">
        <div class="left">提现至</div>
        <div class="right"><span v-text="selectedbank.length>10?selectedbank.slice(0,9)+'...':selectedbank"></span><img
          src="static/imgs/icon_more.png"></div>

      </div>
      <van-popup v-model="shows" position="bottom" :overlay="false">
        <van-picker show-toolbar :columns="txtype" @cancel="onCancel" @confirm="onConfirm"/>
      </van-popup>
      <div class="row">
        <div class="left">提现金额</div>
        <div class="right"><input type="text" placeholder="请输入提现金额" v-model="money"></div>
      </div>
      <div class="row" style="clear: both;">
        <div class="left">支付密码</div>
        <div class="right"><input type="password" placeholder="请输入您的支付密码" maxlength="6" v-model="pay_pwd"></div>
      </div>
    </div>

    <div>
      <div class="withdraw-list" @click="jumpWithdrawList">提现列表</div>
      <div class="allWithdraw" @click="txall">全部提现</div>
    </div>
    <div style="margin: 55px 0 15px 0.3rem;color: #999999">
      提现前请先设置“钱包设置”，查看 <a style="color: #0085f0;border-bottom: 1px solid" @click="getWithdrawalRules()">提现规则</a>。
    </div>
    <div class="txbtn">
      <van-button size="large" class="assstyle" @click="submitx">立即提现</van-button>
    </div>

    <!--输入密码-->

    <!--结束-->

    <!--<div class="txlist" style="margin-top: 26px;">
            <div class="row">
                <div class="left">交易记录</div>
                <div class="right">
                    <router-link style="color: #999999;" to="/tsactionrecord">更多<img src="static/imgs/icon_more.png"></router-link>
                </div>
            </div>

        </div>-->
    <div class="jyrecord">

      <div class="row" v-for="item in jyrecordlist">
        <div class="left">交易记录</div>
        <div class="right" :class="item.status=='-'?'blue':'red'">{{item.status}}￥{{item.money}}<img
          src="static/imgs/icon_more.png"></div>
      </div>

    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        shows: false,
        txtype: [],
        txtypelist: [],
        selectedbank: "请选择",
        txtypeid: "",
        banklists: [],
        selected: "",
        wallet: 0,
        money: "",
        showpwd: false,
        jyrecordlist: [],
        yeandaccount: [],
        bankStatus: "",
        txljlist: [],
        //提现
        tixVisible: false,
        pay_pwd: "",
        istx: true,
        usertype: "",
      };
    },
    created() {
      var token = localStorage.getItem("token");
      this.getyeandaccount(token);
      this.txljtype(token);
      this.gettype(token);
      this.jyrecord(token);
      this.getBankInfo();
    },
    methods: {
      getBankInfo() {
        this.$http.get('api/User_account/card_info').then(response => {
          if (response.code == 200) {
            this.bankStatus = response.data.card.status;
          } else if (response.code == 201) {
            this.bankStatus = 'noBind';
          }
        })
      },
      getWithdrawalRules() { //获取提现规则
        this.$http.get('api/Welcome/article', {article_id: 5}).then(response => {
          if (response.code == 200) {
            this.$dialog.alert({
              title: response.data.title,
              message: response.data.description
            });
          }
        })
      },
      gocener() {
        var that = this;
        if (that.usertype == 1) {
          that.$router.push({
            path: "./Personalcenter"
          });
        } else if (that.usertype == 2) {
          that.$router.push({
            path: "./corporatecenter"
          });
        }
      },
      beforeClose(action, done) {
        if (action === "confirm") {
          setTimeout(done, 1000);
        } else {
          done();
        }
      },
      jumpWithdrawList() {
        this.$router.push('/withDrawList');
      },
      //全部体现
      txall() {
        var that = this;
        if (that.wallet <= 0) {
          that.$toast({
            message: "余额不足,不能提现"
          });
        } else {
          that.money = that.wallet;
        }
      },
      //确认
      onConfirm(value, index) {
        var selectindex = `${index}`;
        this.selectedbank = `${value}`;
        this.txtypeid = this.txtypelist[selectindex].type;
        console.log(this.txtypeid + "索引");
        this.shows = false;
      },
      //取消
      onCancel() {
        this.shows = false;
      },
      //打开体现方式框
      opentxtype() {
        if (this.bankStatus != 1) {
          this.$toast({
            message: "请先设置您的账户",
            duration: 1000
          });
        } else {
          this.shows = true;
        }
      },
      gettype(token) {
        var that = this;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/User/index",
          data: {
            token: token
          },
          cache: false,
          dataType: "json",
          success: function (data) {
            if (data.code == 200) {
              if (data.data.type == 2) {
                that.usertype = 2;
              } else {
                that.usertype = 1;
              }
            }
          }
        });
      },
      //提交提现
      submitx() {
        var that = this;
        if (that.txtypeid == "") {
          that.$toast({
            message: "请选择提现类型",
            duration: 1000
          });
        } else if (that.money == "") {
          that.$toast({
            message: "请输入10以上整数的提现金额",
            duration: 1000
          });
        } else if (that.pay_pwd == "") {
          that.$toast({
            message: "请输入支付密码",
            duration: 1000
          });
        } else if (!/^[1-9]\d*$/.test(that.money) || that.money < 10) {
          that.$toast({
            message: "提现金额仅可输入10以上整数"
          });
        } else {
          var that = this;

          $.ajax({
            url: "http://zcapi.hrgsxt.cn/api/User_account/withdrwalt",
            type: "post",
            data: {
              token: localStorage.getItem("token"),
              type: that.txtypeid,
              money: that.money,
              pay_pwd: that.pay_pwd
            },

            cache: false,
            dataType: "json",
            success: function (data) {
              console.log(JSON.stringify(data) + "提交提现");
              if (data.code == 400) {
                that.$toast({
                  message: data.message,
                  duration: 1000
                });
              } else {
                that.$toast({
                  message: data.message,
                  duration: 1000
                });

                that.$router.push({
                  path: "./nulls",
                  query: {
                    tabitem: "myaccount"
                  }
                });
              }
            }
          });
        }
      },
      //提现
      tixian() {
        var that = this;
        if (that.istx == false) {
          that.$message({
            message: "没有公司银行卡账户，暂时不能提现",
            center: true,
            type: "error"
          });
        } else {
          that.tixVisible = true;
        }
      },
      //获取提现路径
      txljtype(token) {
        var that = this;
        $.ajax({
          url: "http://zcapi.hrgsxt.cn/api/User_account/to_account?token=" + token,
          type: "get",
          processData: false,
          contentType: false,
          success: function (data) {
            if (JSON.parse(data).code == 200) {
              that.txtypelist = JSON.parse(data).data;
              for (var i = 0; i < JSON.parse(data).data.length; i++) {
                that.txtype.push(JSON.parse(data).data[i].name);
              }
            } else if (JSON.parse(data).code == 402) {
              console.log("402");
              that.istx = false;
            }
          }
        });
      },

      //获取账户余额和查询次数
      getyeandaccount(token) {
        var that = this;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/Welcome/user",
          data: {
            token: token
          },
          cache: false,
          dataType: "json",
          success: function (data) {
            console.log(JSON.stringify(data) + "账户余额");
            if (data.code == 200) {
              that.wallet = data.data.wallet;
            } else {
            }
          }
        });
      },

      jyrecord() {
        var that = this;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/User_account/transaction",
          data: {
            token: localStorage.getItem("token")
          },
          cache: false,
          dataType: "json",
          success: function (data) {
            console.log(JSON.stringify(data.data));
            if (data.code == 200) {
              for (var i = 0; i < 4; i++) {
                that.jyrecordlist.push(data.data[i]);
              }
              console.log(JSON.stringify(that.jyrecordlist));
            } else {
              that.$toast({
                message: data.message,
                duration: 1000
              });
            }
          }
        });
      }
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      $route: "fetchData"
    }
  };

  //图片上传并预览
</script>

<style scoped>
  .red {
    color: #ff7e00 !important;
  }

  .blue {
    color: #0085f0 !important;
  }

  .jyrecord {
    margin-top: 0px !important;
    width: 100%;
    font-size: 0.26rem !important;
  }

  .jyrecord .row {
    /*margin-left: 20px;*/
  }

  .txbtn .assstyle {
    border: 0.001rem solid #0085f0;
    background-color: #0085f0;
    color: #ffffff;
    border-radius: 15px;
    height: 0.88rem;
    line-height: 0.88rem;
  }

  .txbtn {
    width: 100%;
    padding: 0px 0.3rem;
  }

  .myaccount .allWithdraw {
    /*width: 100%;*/
    padding-right: 0.3rem;
    margin-top: 0.2rem;
    color: #0085f0;
    float: right;
    /*height: 40px;*/
    /*text-align: right;*/
    font-size: 0.28rem;
  }

  .withdraw-list {
    width: 51%;
    margin-top: 0.2rem;
    padding-left: 0.3rem;
    color: #0085f0;
    float: left;
    /*height: 40px;*/
    /*text-align: right;*/
    font-size: 0.28rem;
  }

  .txlist {
    margin-top: 10px;
  }

  .txlist .row {
    width: 100%;
    height: 0.88rem;
    background-color: #ffffff;
    line-height: 0.88rem;
    padding: 0px 0.3rem;
  }

  .txlist .row:first-child {
    border-bottom: 1px solid #efefef;
  }

  .txlist .row .left {
    width: 50%;
    float: left;
    font-size: 0.3rem;
  }

  .txlist .row .right {
    color: #999999;
    width: 50%;
    float: right;
    font-size: 0.26rem;
    line-height: 0.88rem;
    text-align: right;
  }

  .txlist .row .right img {
    width: 0.14rem;
    height: 0.24rem;
    vertical-align: middle;
    margin-left: 7px;
    margin-bottom: 3px;
  }

  .txlist .row .right input {
    border: none;
    outline: none;
    text-indent: 2em;
    text-align: right;
    padding-right: 0px !important;
  }
  /*查询记录*/

  .jyrecord {
    background-color: #ffffff;
    padding-left: 20px;
  }

  .jyrecord .row {
    width: 100%;
    height: 0.88rem;
    background-color: #ffffff;
    line-height: 0.88rem;
    padding: 0px 0.3rem 0px 0px;
  }

  .jyrecord .row:first-child {
    border-bottom: 1px solid #efefef;
  }

  .jyrecord .row .left {
    width: 50%;
    float: left;
    font-size: 0.28rem;
    color: #666666;
  }

  .jyrecord .row .right {
    color: #666666;
    width: 50%;
    float: right;
    font-size: 0.28rem;
    line-height: 0.88rem;
    text-align: right;
  }

  .jyrecord .row .right img {
    width: 0.14rem;
    height: 0.24rem;
    vertical-align: middle;
    margin-left: 7px;
    margin-bottom: 3px;
  }

  .jyrecord .row .right input {
    border: none;
    outline: none;
    text-indent: 4em;
    text-align: right;
    padding-right: 0px !important;
  }
  /* 头部 */

  .my_header {
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: 0.88rem;
    position: relative;
    padding: 0 0.3rem;
  }

  .myaccount .zhye {
    width: 100%;
    height: 2.4rem;
    background-color: #ffffff;
  }

  .my_header i {
    font-size: 0.4rem;
    float: left;
    line-height: 0.88rem;
  }

  .myaccount .my_header .top1 {
    width: 40%;
    margin-left: 25%;
    float: left;
    text-align: center;
  }

  .myaccount .my_header .cmaccount {
    float: right;
    font-size: 0.28rem;
  }

  .zhye .title {
    width: 100%;
    font-size: 0.28rem;
    color: #999999;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
  }

  .zhye .ye {
    width: 100%;
    font-size: 0.66rem;
    color: #ff7e00;
    text-align: center;
  }
</style>
